<template>
    <div id="box">
        <h1>学生管理系统</h1>
        <el-button @click="dialogFormVisible = true">增加</el-button>
        <el-button type="danger" @click="del">批量删除</el-button>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 80%"
              >
            <el-table-column
                    type="selection"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <el-button type="text" @click="change">更改</el-button>
                <el-button type="text" @click="del($event)">删除</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="page_all"
                @current-change="cursor">
        </el-pagination>

        <el-dialog title="学生信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择性别">
                        <el-option label="男" value="man"></el-option>
                        <el-option label="女" value="woman"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    export default {
        name: "student",
        data(){
            return{
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    age:'',
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                data_all:[{
                    id: 0,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 1,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 2,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 3,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 4,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 5,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }, {
                    id: 6,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 7,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 8,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 9,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 10,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id:11,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id:12,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 13,
                    name: '王小虎',
                    sex: '男',
                    age:18
                },{
                    id: 14,
                    name: '王小虎',
                    sex: '男',
                    age:18
                }],
                page_all:60,
                page_one:5,
                tableData: [],
            }
        },
        methods:{
            del(event) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((page) => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            change() {
                this.$prompt('请输入姓名', '更改', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '更改成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '更改失败'
                    });
                });
            },
            cursor(page){
                this.tableData=this.data_all.slice((page-1)*this.page_one,page*this.page_one)
            }
        },
        created() {
            this.page_all = (this.data_all.length/this.page_one)*10
            this.tableData=this.data_all.slice(0,this.page_one)
        }
    }
</script>

<style scoped>
    #box{
        width: 1000px;
        margin: 0 auto;
    }
</style>